<template>
  <div>
    <div id="container" :style="{ height: '800px', width: '100%' }" />
  </div>
</template>
<script>
import G6 from '@antv/g6'

export default {
  data() {
    return {
      getTreedata: [
        {
          id: 'root',
          label: 'root_aDFGSADFAS_SDFASG-FDSGFDS',
          collapsed: false,
          name: 1,
          children: [
            {
              id: 'c1',
              label: 'c1',
              name: 2,
              children: [
                {
                  id: 'c1-1',
                  label: 'c1-1',
                  name: 3
                },
                {
                  id: 'c1-2',
                  label: 'c1-2',
                  name: 3,
                  children: [
                    {
                      id: 'c1-2-1',
                      label: 'c1-2-1',
                      name: 4
                    },
                    {
                      id: 'c1-2-2',
                      label: 'c1-2-2',
                      name: 4
                    }
                  ]
                }
              ]
            },
            {
              id: 'c2',
              label: 'c2',
              name: 2
            },
            {
              id: 'c3',
              label: 'c3',
              name: 2,

              children: [
                {
                  id: 'c3-1',
                  label: 'c3-1',
                  name: 3
                },
                {
                  id: 'c3-2',
                  label: 'c3-2',
                  name: 3,

                  children: [
                    {
                      id: 'c3-2-1',
                      label: 'c3-2-1',
                      name: 4
                    },
                    {
                      id: 'c3-2-2',
                      label: 'c3-2-2',
                      name: 4
                    },
                    {
                      id: 'c3-2-3',
                      label: 'c3-2-3',
                      name: 4
                    }
                  ]
                },
                {
                  id: 'c3-3',
                  label: 'c3-3',
                  name: 3
                }
              ]
            }
          ]
        }
      ],
      tipmsg: {
        c3: '李四'
      },
      treedata: [
        {
          id: 'root',
          label: 'rootDSGKLH_DSGFDSGDJL_DSFGSDFGDS',
          name: 1,
          context: 'root悬框',
          children: [],
          collapsed: false
        }
      ]
    }
  },
  mounted() {
    // this.changeTreeData()
    this.showChart()
  },
  methods: {
    showChart() {
      const data = this.getTreedata[0]
      const container = document.getElementById('container')

      if (container) {
        const width = container.clientWidth * 2
        const height = container.clientHeight
        const tooltip = new G6.Tooltip({
          offsetX: 70,
          offsetY: 20,
          getContent(e) {
            console.log('e==', e.item._cfg.model.context)
            const outDiv = document.createElement('div')
            outDiv.style.width = '180px'
            outDiv.innerHTML = `
            <ul id="nodeDetails" style="backgroundColor: pink">
              <li style="color:red; font-weight:bold; backgroundColor: pink">名称: ${
                e.item._cfg.model.context
              }</li>
            </ul>`
            return outDiv
          },
          itemTypes: ['node']
        })
        const graph = new G6.TreeGraph({
          // 图的DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
          container: container,
          width: width,
          height: height,
          plugins: [tooltip],
          fitView: true,
          collapsed: false,
          // layout: {
          //   type: 'force',
          //   preventOverlap: true, // 防止节点重叠
          //   // 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
          //   nodeSize: 100,
          //   linkDistance: 150 // 指定边距离为150
          // },
          // 设置画布的模式 包含default 模式和 edit 模式
          modes: {
            // default 模式中包含点击选中节点行为和拖拽画布行为
            default: [
              {
                // 屏蔽节点隐藏
                // type: 'collapse-expand',
                trigger: 'click'
              },
              // 拖拽画布 和 缩放画布
              'drag-canvas',
              'zoom-canvas'
            ]
          },
          // 默认的节点设置
          // defaultNode: {
          //   type: 'react',
          //   //节点的大小
          //   size: 14,
          //   // 指定边连入节点的连接点的位置
          //   anchorPoints: [[0, 0.5], [1, 0.5]],
          //   // 节点样式
          //   style: {
          //     fill: '#C6E5FF',
          //     stroke: '#5B8FF9'
          //   }
          // },
          defaultNode: {
            type: 'rect',
            size: [200, 30],
            style: {
              fill: '#409EFF'
            },
            labelCfg: {
              positions: 'center',
              // 节点上的标签文本样式配置
              style: {
                fill: '#fff' // 节点标签文字颜色
              }
            }
          },
          // 默认的配置
          defaultEdge: {
            shape: 'line-with-arrow',
            type: 'cubic-horizontal',
            style: {
              stroke: '#A3B1BF',
              // 线宽
              lineWidth: 0.3
            }
          },
          layout: {
            type: 'compactBox',
            direction: 'LR',
            // 指定节点 ID
            getId: function getId(d) {
              console.log('====dd', d)
              return d.id
            },
            // 指定节点高度
            getHeight: function getHeight() {
              return 16
            },
            //指定节点宽度
            getWidth: function getWidth() {
              return 16
            },
            // 指定节点之间的垂直间距
            getVGap: function getVGap() {
              return 10
            },
            // 指定节点之间的水平间距
            getHGap: function getHGap() {
              return 100
            }
          }
        })
        // const linkEdge = {
        //   draw(cfg, group) {
        //     let sourceNode, targetNode, start, end
        //     if (!cfg.source.x) {
        //       sourceNode = cfg.source.getModel()
        //       start = {
        //         x: sourceNode.x + cfg.start.x,
        //         y: sourceNode.y + cfg.start.y
        //       }
        //     } else {
        //       start = cfg.source
        //     }
        //     if (!cfg.target.x) {
        //       targetNode = cfg.target.getModel()
        //       end = {
        //         x: targetNode.x + cfg.end.x,
        //         y: targetNode.y + cfg.end.y
        //       }
        //     } else {
        //       end = cfg.target
        //     }

        //     let path = []
        //     path = [['M', start.x, start.y], ['L', end.x, end.y]]
        //     const keyShape = group.addShape('path', {
        //       attrs: {
        //         id: 'edge' + G6.Util.uniqueId(),
        //         path: path,
        //         stroke: '#1890FF',
        //         strokeOpacity: 0.9,
        //         lineDash: [5, 5]
        //       }
        //     })
        //     return keyShape
        //   }
        // }
        // G6.registerEdge('link-edge', linkEdge)

        // 为不同节点进行不同的配置 必须在 render 之前调用
        graph.node(function(node) {
          console.log('node.children.length', node)
          let color = {
            1: 'blue',
            2: 'red',
            3: 'yellow'
          }
          return {
            style: {
              // fill: node.depth == 2 ? 'blue' : 'red',
              fill: color[node.depth]
              // stroke: node.depth == 3 && node.status ? 'yellow' : 'yellow'
            },
            //String 类型。标签文本的文字内容
            label: node.label,
            labelCfg: {
              // 文本的偏移
              // offset: right,
              // refY: 0,
              // refY: -200,
              // refX: 200,
              // 文本相对于节点的位置
              position:
                // node.children && node.children.length > 0 ? 'bottom' : 'bottom',
                node.children && node.children.length > 0 ? 'center' : 'center',
              // position: 'start',
              // textAlign: 'start',
              //文本样式
              style: {
                fill: node.depth == 2 && node.status ? '#c1422b' : '#2c3e50',
                // textAlign: 'start',
                // fontSize: 10
              }
            }
          }
        })
        // graph.Global.edgeLabel.style = {
        //   fontSize: 30
        // }

        //初始化数据
        graph.data(data)
        //渲染视图
        graph.render()
        //让画布内容适应视口
        graph.fitView()
        graph.setItemState('node1', 'selected', true)
      }
    }
  }
}
</script>

<style scoped>
#nodeDetails {
  list-style: none;
  background-color: blue;
}
#nodeDetails > li {
  padding: 5px 0;
  text-align: left;
  background-color: red;
}
::v-deep .g6-component-tooltip {
  background-color: #ccc;
}
</style>
